<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基本案列</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__loading-item">
               <uv-loading-icon></uv-loading-icon>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">半圆loading</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__loading-item">
               <uv-loading-icon mode="semicircle"></uv-loading-icon>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">圆形loading</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__loading-item">
               <uv-loading-icon mode="circle"></uv-loading-icon>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义动画</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__loading-item">
               <uv-loading-icon mode="circle" timingFunction="ease-in-out"></uv-loading-icon>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义颜色</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__loading-item">
               <uv-loading-icon color="#3c9cff"></uv-loading-icon>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义文字</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__loading-item">
               <uv-loading-icon :vertical="true" text="加载中"></uv-loading-icon>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.uv-page {
   &__loading-item {
      margin-top: 5px;
   }
}

.uv-demo-block__content {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
}
</style>
